<template>
  <div class="my">
    <van-nav-bar
      title="我的"
      left-text="返回"
      left-arrow
      @click-left="back()"
    />
    <div class="my-bg"></div>

    <div class="my-box">
      <div class="my-info">
        <div class="my-img">
          <img class="auto-img" :src="userInfo.userImg" alt="" />
        </div>
        <div class="user-info">
          <div class="user-name one-text">{{ userInfo.nickName }}</div>
          <div class="desc one-text">
            {{ userInfo.desc ? userInfo.desc : "这家伙很懒，什么也没有留下！" }}
          </div>
        </div>
        <button class="login" ref="ten" @click="token2()">
          {{ title }}
        </button>
      </div>

      <div class="cell-list">
        <div
          class="cell-list-item"
          v-for="(item, index) in cellListData"
          :key="index"
          @click="getname(item.routeName)"
        >
          <van-cell :title="item.title" is-link />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      title: "登录",
      istoken: false,
      cellListData: [
        {
          title: "个人资料",
          routeName: "Account",
        },
        {
          title: "信息中心",
          routeName: "MyMessage",
        },
        {
          title: "特色功能",
          routeName: "Function",
        },
        {
          title: "隐私政策摘要",
          routeName: "Privacy",
        },
        {
          title: "关于闲听",
          routeName: "inRegardTo",
        },
      ],

      //用户数据
      userInfo: {
        desc: "",
        nickName: "",
        userBg: "",
        userImg: "",
      },
    };
  },

  created() {
    this.$toast("加载成功");
    this.token1();
  },

  methods: {
    getname(name) {
      this.$router.push({ name });
    },
    back() {
      this.$router.go(-1);
    },
    token1() {
      let localData = JSON.parse(localStorage.getItem("token"));
      if (localData === "") {
        return;
      } else {
        if (localData) {
          this.title = "退出登录";
          this.istoken = true;
          this.userInfo.nickName = localData.nickName;
          this.userInfo.userImg =
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F9%2F4%2F476b2be9-d62c-4e25-840f-2b39898ea8fd.png&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651199649&t=bb9d140f787ab0461a69bd76857b6dc5";
        } else {
          this.title = "登录";
          this.istoken = false;
        }
      }
    },
    token2() {
      if (this.title === "登录") {
        this.$router.push({ name: "Login" });
      } else {
        this.$dialog
          .confirm({
            message: "是否确定退出登录？",
          })
          .then(() => {
            if (this.istoken === true) {
              this.$router.push({ name: "Login" });
              localStorage.removeItem("token");
            }
          })
          .catch((err) => {
            this.$router.push({ name: "My" });
            return;
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.my {
  .cell-list-item {
    border-bottom: 1px solid #f0f0f0;
    &:last-child {
      border-bottom: none;
    }
  }
  .my-info {
    position: relative;
  }
  .cell-list {
    margin-top: 50px;
  }
  .user-name {
    font-weight: bold;
    color: #333;
    font-size: 18px;
  }
  .desc {
    margin-top: 10px;
    color: #666;
  }
  .login {
    border-radius: 10px;
    position: absolute;
    text-align: center;
    background-color: #e4393c;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 15px;
    border: 0;
  }
  .user-info {
    font-size: 14px;
    margin-left: 20px;
  }
  .my-img {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  .my-info {
    display: flex;
    align-items: center;
  }
  .my-bg {
    height: 140px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #f9e3d5;
    position: relative;
  }

  .uploader-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    /deep/ .van-uploader {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-uploader__wrapper {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-uploader__upload {
      margin: 0;
      width: 100%;
      height: 100%;
    }
  }

  .my-box {
    padding: 10px;
    margin: 0 10px;
    position: relative;
    top: -35px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 1) 35px
    );
  }
  /deep/.van-nav-bar .van-icon {
    color: #e4393c;
  }
  /deep/.van-nav-bar__text {
    color: #e4393c;
  }
}
</style>